import { ChatRecord } from '@/interface'
import { isTrue } from '@/utils/tools'
import { equals } from 'ramda'
import { UserOutlined } from '@ant-design/icons-vue'
import { Ref } from 'vue'
import { textReplaceEmoji } from '@/utils/emojis'
/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-01-14 17:48:13
 */
interface Callback {
	openUserInfo: (userId: number) => void
}
const userId = localStorage.getItem('userId') as string
/**
 *
 * @param data 聊天数据
 * @param friendsRemarksMap 备注集合
 * @param callback 回调函数
 * @returns {Element}
 */
export default function messageWrapper(
	data: ChatRecord,
	friendsRemarksMap: Ref<Map<string, string>>,
	callback: Callback
) {
	return !equals(data.userId as number, Number(userId)) ? (
		<div class="msg msg-left">
			<div class="img-wrapper">
				{isTrue(data.user?.headimgurl) ? (
					<img src={data.user?.headimgurl} onClick={() => callback.openUserInfo(data.userId as number)} />
				) : (
					<a-avatar
						shape="square"
						size={36}
						icon={<UserOutlined />}
						onClick={() => callback.openUserInfo(data.userId as number)}
					/>
				)}
			</div>
			<div class="msg-left-box">
				<div class="name">{friendsRemarksMap.value.get(String(data.userId)) ?? data.user?.username}</div>
				<div class="message-box">
					<div class="message-wrapper message-wrapper-left">
						<div class="message" v-html={textReplaceEmoji(data.content as string)}></div>
					</div>
					{/* <div class="isRead">{equals(data.isRead, 1) ? '已读' : '未读'}</div> */}
				</div>
			</div>
		</div>
	) : (
		<div class="msg msg-right">
			<div class="img-wrapper">
				<img
					class="img"
					src="http://chat-master.oss-cn-guangzhou.aliyuncs.com/image/3b02c7ac7f99ce79ee5cb53e08039a8eb60e404fb7853adb378d22d3114cf250QzpcVXNlcnNcMTEyOTZcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDYyOTg2MDkyM192MlxJbWFnZUZpbGVzXDE2Njg0MDg5MTc1MzRfNzkxNUE2QjktRTQ0RC00NDBhLUFBNUItMUMzQzQ1OTg2MDk1LnBuZw%3D%3D.png"
					onClick={() => callback.openUserInfo(data.userId as number)}
				/>
			</div>
			<div class="message-wrapper message-wrapper-right">
				<div class="message" v-html={textReplaceEmoji(data.content as string)}></div>
			</div>
		</div>
	)
}
